<template>
	<scroll-view scroll-x="true" class="top-bar" :scroll-into-view="`top${topBarActive}`">
		<view class="bar-item" :id="`top${item.id}`" v-for="item in topBar" :key="item.id" @tap="changeTopBar(item.id)">
			<text :class="topBarActive+1===item.id?'f-active-color':''">
				{{item.name}}
			</text>
		</view>
	</scroll-view>
	<swiper :current="topBarActive" @change="onChangeTab" :style="{height:`${contentHeight}px`}">
		<swiper-item v-for="item in newTopBar" :key="item.id">
			<scroll-view scroll-y="true" :style="{height:`${contentHeight}px`}" @scrolltolower="loadMore">
				<view>
					<block v-if="Object.keys(item.data).length>0">
						<block v-for="(item,index) in item.data" :key="item.type">
							<indexSwiper v-if="item.type==='swpierData'" :swpierData="item.data"></indexSwiper>
							<indexRecommend v-if="item.type==='recommend'" :recommend="item.data"></indexRecommend>
							<!-- 除首页外 -->
							<indexBanner v-if="item.type==='banner'" :src="item.data"></indexBanner>
							<indexIcons v-if="item.type==='icons'" :icons="item.data"></indexIcons>
							<indexHot v-if="item.type==='hot'" :dataList="item.data"></indexHot>
							<indexShop v-if="item.type==='shop'" :shop="item.data"></indexShop>

							<template v-if="item.type==='commoDityData'">
								<view class="card">
									<indexFontSize text="猜你喜欢"></indexFontSize>
								</view>
								<commomDity :dataList="item.data" bigH="620rpx"></commomDity>
							</template>
						</block>
					</block>
					<view v-if="Object.keys(item.data).length>0" class="load-text">{{item.loadText}}</view>
					<block v-else>
						<view class="on-hide">
							暂无数据...
						</view>
					</block>
				</view>
			</scroll-view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onReady,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		getTopBar,
		getHomeData
	} from "@/util/api/api.js"

	let contentHeight = ref(0);
	let topBarActive = ref(0);
	let topBar = ref([]);
	let newTopBar = ref([]);

	// 监听topBar
	const changeTopBar = id => {
		console.log(newTopBar.value[id])
		topBarActive.value = id - 1;
		addData();
	}
	// 监听swiper
	const onChangeTab = e => {		
		topBarActive.value = e.detail.current
		addData();
	}
	// 获取首页数据
	const initList = async () => {
		topBar.value = await getTopBar();
		newTopBar.value = initData(await getHomeData());
	};
	// 首次获取数据
	const initData = (res) => {
		let arr = [];
		topBar.value.map((item, index) => {
			let obj = {
				id: index + 1,
				data: [],
				index: 0,
				loadText: "下拉加载更多..."
			};
			// 首次获取数据
			if (index === 0) {
				obj.data = res
				obj.index++;
			}

			arr.push(obj);
		})
		return arr;
	}
	// tab topBar滑动添加数据
	const addData = async () => {
		let res;
		if (newTopBar.value[topBarActive.value].index === 0) {
			res = await getHomeData(newTopBar.value[topBarActive.value].id);
		}
		newTopBar.value = newTopBar.value.map((item, index, arr) => {

			if (index === topBarActive.value && item.index === 0) {
				const itemData = item;
				itemData.data = [...arr[index].data, ...res]
				item.index++;
				return itemData
			} else {
				return item;
			}
		})
	}
	// 上拉加载数据
	const loadMore = async () => {
		
		newTopBar.value[topBarActive.value].loadText="加载中...";
		
		const res = await getHomeData(topBarActive.value,++newTopBar.value[topBarActive.value].index);

		newTopBar.value[topBarActive.value].data.filter(item => {
			const itemBase = item;
			if (itemBase.type === "commoDityData") {
				itemBase.data=[...itemBase.data,...res];
				newTopBar.value[topBarActive.value].loadText="下拉加载更多...";
			}
		})

	}
	//初始化高度
	const initPageHeight = () => {
		const res = uni.getSystemInfoSync();
		// #ifdef APP-PLUS
		if (res.platform === "ios") {
			contentHeight.value = res.windowHeight - uni.upx2px(80) - uni.upx2px(80) - 44 + res.statusBarHeight;
		} else if (res.platform === "android") {
			contentHeight.value = res.windowHeight - uni.upx2px(80) - 48 + res.statusBarHeight;
		}
		// #endif
		// #ifdef MP-WEIXIN
		contentHeight.value = res.windowHeight - uni.upx2px(80);
		// #endif

		// #ifdef H5
		contentHeight.value = res.windowHeight - uni.upx2px(80);
		// #endif
	};
	// 搜索 点击
	onNavigationBarButtonTap((e)=>{
		e.float==="left"?uni.navigateTo({
			url:"../search/search"
		}):'';
	})

	onLoad(async () => {
		await initList();
	});
	onReady(() => {
		initPageHeight()
	})
</script>

<style lang="scss" scoped>
	.top-bar {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;

		.bar-item {
			display: inline-block;
			padding: 10rpx 30rpx;
		}

		.f-active-color {
			padding: 10rpx;
			border-bottom: 4rpx solid #49BDFB;
		}
	}

	.load-text {
		text-align: center;
	}
	.on-hide{
		text-align: center;
	}
</style>
